<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>编辑器</title>
    <link rel="stylesheet" href="vendor/github-markdown-css/github-markdown.css">
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="font/iconfont/iconfont.css">
    <style>
    body {
        font-family: 14px/1.5 arial, "source Han Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
    }
    
    a {
        text-decoration: none;
    }
    
    input[type=file] {
        display: none;
    }
    /**
     * container style
     */
    
    html,
    body,
    .editor-container,
    .editor,
    .preview {
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    
    .editor-container,
    .editor-container:focus {
        position: relative;
        outline: none;
        box-shadow: none;
        border: none;
    }
    
    .editor,
    .preview {
        width: 50%;
        box-sizing: border-box;
    }
    
    .editor {
        background: #2D2D2D;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .editor>div[contenteditable] {
        height: 100%;
        outline: none;
        box-shadow: none;
        padding: 20px;
        color: #f9f9f9;
    }
    
    .preview {
        position: absolute;
        top: 0;
        right: 0;
        padding: 20px;
    }
    
    .slimScrollDiv {
        height: 100%;
        overflow: hidden;
    }
    
    .tools {
        /*background: #ccc;*/
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
    .tools a {
        color: #000;
    }
    </style>
</head>

<body>
    <div class="editor-container" lm-editor="true" tabindex="1">
        <input type="file" nwsaveas="lessmark.md" id="saveas">
        <div class="slimScrollDiv editor">
            <div lm-slimscroll contenteditable="plaintext-only" ng-model="markcontent" spellcheck="false"></div>
        </div>
        <div class="slimScrollDiv preview">
            <div class="markdown-body" lm-slimscroll ng-bind-html="htmlcontent"></div>
        </div>
        <div class="tools" lm-tools="true">
            <a href="javascript:;" ng-if="!isFullscreen" ng-click="enterFullscreen()"><i class="iconfont">&#xe643;</i></a>
            <a href="javascript:;" ng-if="isFullscreen" ng-click="leaveFullscreen()"><i class="iconfont">&#xe6ac;</i></a>
        </div>
    </div>
</body>
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular/angular-sanitize.min.js"></script>
<script src="vendor/marked/lib/marked.js"></script>
<script src="vendor/jquery-slimScroll/jquery.slimscroll.js"></script>
<script src="vendor/jquery-hotkeys/jquery.hotkeys.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
<script src="js/bootstrap.js"></script>

</html>
